<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04猜数字练习</title>
</head>
<body>
<h3>已生成一个1~100的随机数：</h3>
<input type="text" placeholder="请输入你猜的数字！">
<button onclick="guess()">点我验证</button>
<h3>小提示：<span></span></h3>

<script>
    //1.生成[1,101)的随机整数
    let n = parseInt(Math.random()*100)+1
    console.log('打个小抄：'+n);
    //5.定义变量用来统计猜的次数
    var count = 0;
    //2.定义一个用来猜数字的函数
    function guess(){
        //3.拿到用户在输入框中输入的数字
        let num = document.querySelector('input').value;
        //isNaN()用于判断参数是否为非数字，如果是非数字，结果为true，否则为false
        //正斜杠(/)用来包裹正则表达式
        //^表示字符串开头， $表示字符串结尾， \d表示数字， +表示至少一个数字
        //.test(参数)用来判断参数是否匹配前面的正则表达式，屁屁额返回true，不匹配返回false
        if (!/^\d+$/.test(num)){
        // if (isNaN(num)){
            alert('请输入数字！');
            return;
        }
        //4.获取span元素用来显示比较结果
        let spanE = document.querySelector('span');
        //6.每比较一次，次数+1
        count++;
        if (num>n){
            spanE.innerHTML = '猜大了！';
        }else if (num<n){
            spanE.innerHTML = '猜小了！';
        }else {
            //7.将统计次数拼接到正确结果中
            spanE.innerHTML = '恭喜你用了'+count+'次就猜对了！';
        }
    }
</script>
</body>
</html>